<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图书管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书信息查询</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row class="card-head-row">
        <el-col :span="8">
          <el-input v-model="params.value" placeholder="请输入内容" size="small">

            <el-select slot="prepend" v-model="params.field" placeholder="请选择" style="width:110px">
              <el-option label="书名" value="b_title"></el-option>
              <el-option label="作者" value="b_autor"></el-option>
              <el-option label="ISBN编号" value="b_isbn"></el-option>
              <el-option label="图书id" value="id"></el-option>
            </el-select>

            <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 表格部分 -->
      <el-table :data="list.data" style="width: 100%" size="small" border stripe>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="style-table-expand" label-width="100px">
              <el-form-item label="图书ID：">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="图书名称：">
                <span>{{ props.row.b_title }}</span>
              </el-form-item>
              <el-form-item label="图书出版社：">
                <span>{{ props.row.b_publisher }}</span>
              </el-form-item>
              <el-form-item label="出版时间：">
                <span>{{ props.row.b_publisher_time }}</span>
              </el-form-item>
              <el-form-item label="图书价钱：">
                <span>{{ props.row.b_price }}</span>
              </el-form-item>
              <el-form-item label="图书描述：">
                <span>{{ props.row.b_desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="图书 ISBN" prop="b_isbn"></el-table-column>
        <el-table-column label="图书名称" prop="b_title"></el-table-column>
        <el-table-column label="图书作者" prop="b_author"></el-table-column>
        <el-table-column label="图书照片">
          <template>
            <img src="../../assets/imgs/book.jpg" alt class="img-wrap"/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip content="修改书籍" placement="top-start">
              <el-button circle
                         type="primary"
                         icon="el-icon-edit"
                         size="small"
                         @click="edit(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除书籍" placement="top-start">
              <el-button circle
                         type="danger"
                         icon="el-icon-delete"
                         size="small"
                         @click="del(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background
                     @current-change="pageChange"
                     :current-page="list.currentPage"
                     :page-size="list.pageSize"
                     layout="total, prev, pager, next"
                     :total="list.total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import {book, status} from "../../request";

export default {
  data() {
    return {
      params: {field: 'b_title'},
      list: {
        currentPage: 1,
        total: 0,
        page: 1, //当前页数
        pageSize: 15,
        data: []
      },
    };
  },
  created() {
    this.getBookList();
  },
  methods: {
    searchClick() {
      this.getBookList();
    },
    async getBookList() {
      const data = await book.list(this.params);
      if (data.code != 200) return this.$message.error(data.msg);

      this.list.total = data.data.total;
      this.list.data = data.data.data;
      this.searchType && delete this.params[this.searchType];
    },
    pageChange(page) {
      this.params.page = page;
      this.getBookList();
    },
    del(row) {
      this.$confirm("你却要删除 【 " + row.b_title + " 】 这本书吗?", "提示", {type: "warning"})
        .then(async () => {
          const data = await book.del({id: row.id});
          if (data.code == status.SUCCESS) {
            this.$message.success(data.msg);
            this.getBookList();
          }
        })
        .catch(() => {
          //this.$message.error('已取消删除');
        });
    },
    edit(row) {
      this.$notify({
        title: "警告",
        message: "书籍信息的编辑功能尚不支持哦~",
        type: "warning"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.style-table-expand {
  font-size: 0;
  color: #99a9bf;

  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;

    label {
      width: 90px;
    }

    span {
    }
  }
}

.img-wrap {
  max-width: 70px;
}
</style>
